import { useState, useEffect } from "react";
import style from "./todo.module.scss";
import {pageMyTask} from "@/api/task";
import {
  Form,
  Input,
  Button,
  Table,
} from "antd";
import FormItem from "antd/es/form/FormItem";

function MyProcessTodo() {
  const [pageNum] = useState(1);
  const [pageSize] = useState(15);
  const [searchForm] = Form.useForm();
  const [tabColumns] = useState([
    {
      title: "任务名称",
      width: 100,
      dataIndex: "name",
    },
    {
      title: "流程名称",
      width: 100,
      dataIndex: "status",
    },
    {
      title: "状态",
      width: 100,
      dataIndex: "status",
    },
    {
      title: "紧急程度",
      width: 100,
      dataIndex: "createTime",
    },
    {
      title: "任务创建时间",
      width: 100,
      dataIndex: "createTime",
    },
    {
      title: "任务持续时间",
      width: 100,
      dataIndex: "createTime",
    },
    {
      title: "操作",
      width: 120,
      fixed: "right",
      render: (row) => (
        <>
          <div>
            <a
              onClick={() => {
                alert("办理")
              }}
            >
              办理
            </a>
            <a
              style={{ marginLeft: "10px" }}
              onClick={() => {
                alert("指派代理人");
              }}
            >
              指派代理人
            </a>
          </div>
        </>
      ),
    },
  ]);
  const [dataSource, setDataSource] = useState([]);
  const [total, setTotal] = useState(0);

  useEffect(() => {
    getPage(pageNum, pageSize);
  }, []);





  const getPage = (pageNo, size) => {
    let pageInput = searchForm.getFieldsValue();
    pageInput.pageNum = pageNo;
    pageInput.pageSize = size;
    pageMyTask(pageInput).then((res) => {
      setDataSource(res.data);
      setTotal(res.total);
    });
  };


  return (
    <>

      <div className={style.todo}>
        <div className={style.top}>
          <Form
            onFinish={() => getPage(pageNum, pageSize)}
            form={searchForm}
            layout={"inline"}
          >
            <FormItem name={"name"} label="名称">
              <Input />
            </FormItem>
            <FormItem>
              <Button htmlType={"submit"} type={"primary"}>
                搜索
              </Button>
            </FormItem>
            <FormItem>
              <Button
                onClick={() => {
                  searchForm.resetFields();
                  getPage(pageNum, pageSize);
                }}
              >
                重置
              </Button>
            </FormItem>
          </Form>
        </div>
        <div className={style.content}>
          <Table
            rowKey={"id"}
            columns={tabColumns}
            dataSource={dataSource}
            pagination={{
              total: total,
              pageSize: pageSize,
              onChange: (page, size) => {
                getPage(page, size);
              },
              position: "bottom",
            }}
          />
        </div>
      </div>
    </>
  );
}
export default MyProcessTodo;
